<!-- TODO: 这个页面后续将用 JSX 重构 -->
<template>
    <div class="attr-list">
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="基本属性" name="1">
                <div class="attItem">
                    <div style="margin-bottom: 1rem;">位置和尺寸</div>
                    <div style="display: flex;flex-direction: row;flex-wrap: wrap;">
                        <div class="locationDimension">
                            <el-input type="number" v-model="curComponent.style.left" />
                            <span class="locationText">X</span>
                        </div>
                        <div class="locationDimension" style="margin: 0 10px;">
                            <el-input type="number" v-model="curComponent.style.top" />
                            <span class="locationText">Y</span>
                        </div>
                        <div class="locationDimension">
                            <el-input type="number" v-model="curComponent.style.rotate" />
                            <span class="locationText">°</span>
                        </div>
                        <div class="locationDimension" style="margin-top: 10px;">
                            <el-input type="number" v-model="curComponent.style.width" />
                            <span class="locationText">W</span>
                        </div>
                        <div class="locationDimension" style="margin: 10px 10px;">
                            <el-input type="number" v-model="curComponent.style.height" />
                            <span class="locationText">H</span>
                        </div>
                    </div>
                </div>

                <div class="attItem" style="border-top: 2px solid #cccccc2e;" v-if="
            curComponent.style.backgroundColor ||
              curComponent.style.backgroundColor == ''
          ">
                    <div style="margin-bottom: 1rem;">外观</div>
                    <div style="display: flex;justify-content: space-between;">
                        <div style="width: 40%;display: flex;justify-content: space-between;">
                            <span class="itemColor">背景</span>
                            <el-color-picker size="mini" @active-change="stylebackgroundColor" :predefine="predefineColors" show-alpha v-model="curComponent.style.backgroundColor"></el-color-picker>
                        </div>
                        <div style="width: 45%;display: flex;justify-content: space-between;">
                            <span class="itemColor">边框颜色</span>
                            <el-color-picker size="mini" @active-change="styleborderColor" :predefine="predefineColors" show-alpha v-model="curComponent.style.borderColor"></el-color-picker>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: space-between;margin:0 0 .5rem 0;">
                        <div>
                            <span class="itemColor">边框风格</span>
                        </div>
                        <div>
                            <el-radio-group size="mini" v-model="curComponent.style.borderStyle" @change="borderStyleChange">
                                <el-radio-button label="solid">实线</el-radio-button>
                                <el-radio-button label="dashed">虚线</el-radio-button>
                            </el-radio-group>
                        </div>
                    </div>
                    <div style="margin:.5rem 0;">
                        <span class="itemColor">边框宽度</span>
                        <el-input style="margin-left: 10%;" class="inputRight" type="number" v-model="curComponent.style.borderWidth" />
                    </div>
                    <div>
                        <span class="itemColor">圆角</span>
                        <el-input style="margin-left: 23%;" class="inputRight" type="number" v-model="curComponent.style.borderRadius" />
                    </div>
                </div>

                <div class="attItem" style="border-top:2px solid #cccccc2e" v-if="
            curComponent.style.fontSize || curComponent.style.fontSize == ''
          ">
                    <div style="margin-bottom: 1rem;">文本</div>
                    <div>
                        <div>
                            <span class="itemColor">字体大小</span>
                            <el-input style="margin-left: 10%;" class="inputRight" type="number" v-model="curComponent.style.fontSize" />
                        </div>
                        <div style="margin:.5rem 0;">
                            <span class="itemColor">行高</span>
                            <el-input style="margin-left: 23%;" class="inputRight" type="number" v-model="curComponent.style.lineHeight" />
                        </div>
                        <div>
                            <span class="itemColor">间距</span>
                            <el-input style="margin-left: 23%;" class="inputRight" type="number" v-model="curComponent.style.letterSpacing" />
                        </div>
                        <div style="margin:.5rem 0;">
                            <span>颜色</span>
                            <el-color-picker style="margin-left: 10%;" size="mini" @active-change="stylecolor" :predefine="predefineColors" show-alpha v-model="curComponent.style.color"></el-color-picker>
                            <el-radio-group style="margin-left: 6%;" size="mini" v-model="curComponent.style.fontWeight" @change="fontWeightChange">
                                <el-radio-button label="700">粗</el-radio-button>
                                <el-radio-button label="500">细</el-radio-button>
                            </el-radio-group>
                        </div>
                        <div v-if="curComponent.label !== '时间控件'">
                            <el-radio-group size="mini" v-model="curComponent.style.textAlign" @change="textAlignChange">
                                <el-radio-button label="left">左对齐</el-radio-button>
                                <el-radio-button label="center">居中</el-radio-button>
                                <el-radio-button label="right">右对齐</el-radio-button>
                            </el-radio-group>
                            <el-radio-group size="mini" v-model="curComponent.style.verticalAlign" @change="verticalAlignChange">
                                <el-radio-button label="top">上对齐</el-radio-button>
                                <el-radio-button label="middle">居中</el-radio-button>
                                <el-radio-button label="bottom">下对齐</el-radio-button>
                            </el-radio-group>
                        </div>
                        <el-input v-if="curComponent.label !== '时间控件'" style="margin-top:.5rem;" type="textarea" v-model="curComponent.propValue" />
                    </div>
                </div>
                <!-- </el-form> -->
            </el-collapse-item>

            <div v-if="curComponent.option">
                <el-collapse-item title="配色方案" name="2" v-if="curComponent.option.color">
                    <div class="legendBox">
                        <div class="legend" v-for="(item, index) in curComponent.option.color" :style="{ backgroundColor: item }" :key="index"></div>
                    </div>
                    <div style="height:22px;margin:4px 0;color:#ffffff7d;">内置方案</div>
                    <div class="legendBox legendItem" v-for="(item, index) in colors" :key="index" @click="setEchartsColor(item)">
                        <div class="legend" v-for="(i, index1) in item" :style="{ backgroundColor: i }" :key="index1"></div>
                    </div>
                </el-collapse-item>

                <el-collapse-item title="标题 / 单位" name="3" v-if="curComponent.option && curComponent.label != '基础饼图' ">
                    <div style="padding: 5px 0;">
                        <div class="optionTitle">
                            <div style="width:24%;">标题</div>
                            <div style="width:9.5rem;">
                                <el-input type="text" clearable v-model="curComponent.option.title[0].text" @input="inputChange" />
                            </div>
                        </div>
                        <div v-if="curComponent.option.title[0].text" style="margin:10px 0;">
                            <div style="margin-left: 49px;">
                                <el-color-picker size="mini" @active-change="styletitlecolor" :predefine="predefineColors" show-alpha v-model="curComponent.option.title[0].textStyle.color"></el-color-picker>
                                <div style="border:1px solid #39435D;display: inline-block;border-radius: 4px;margin-left:5px;">
                                    <el-checkbox-button v-model="curComponent.option.title[0].textStyle.fontWeight" true-label="bolder" false-label="normal" @change="titleBold">
                                        <img src="../assets/img/icon_加粗.png" alt="" />
                                    </el-checkbox-button>
                                    <el-checkbox-button v-model="curComponent.option.title[0].textStyle.fontStyle" true-label="oblique" false-label="normal" @change="titleOblique">
                                        <img src="../assets/img/icon_斜体.png" alt="" />
                                    </el-checkbox-button>
                                </div>
                                <el-input class="titleStyleInput" type="number" v-model="curComponent.option.title[0].textStyle.fontSize" />
                            </div>
                        </div>
                        <div v-if="curComponent.option.title[0].text" class="optionTitle">
                            <div>位置</div>
                            <div style="margin-left: 1.5rem;">
                                <el-radio-group size="mini" v-model="curComponent.option.title[0].left" @change="titlePosition">
                                    <el-radio-button label="left">左上</el-radio-button>
                                    <el-radio-button label="center">中上</el-radio-button>
                                    <el-radio-button label="right">右上</el-radio-button>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                    <div style="padding: 5px 0;">
                        <div class="optionTitle">
                            <div style="width:24%;">单位</div>
                            <div style="width:9.5rem;">
                                <el-input type="text" clearable v-model="curComponent.option.title[1].text" @input="inputChange" />
                            </div>
                        </div>
                        <div v-if="curComponent.option.title[1].text" style="margin:10px 0;">
                            <div style="margin-left: 49px;">
                                <el-color-picker size="mini" @active-change="styletitlecolorSub" :predefine="predefineColors" show-alpha v-model="curComponent.option.title[1].textStyle.color"></el-color-picker>
                                <div style="border:1px solid #39435D;display: inline-block;border-radius: 4px;margin-left:5px;">
                                    <el-checkbox-button v-model="curComponent.option.title[1].textStyle.fontWeight" true-label="bolder" false-label="normal" @change="CompanyBold">
                                        <img src="../assets/img/icon_加粗.png" alt="" />
                                    </el-checkbox-button>
                                    <el-checkbox-button v-model="curComponent.option.title[1].textStyle.fontStyle" true-label="oblique" false-label="normal" @change="CompanyOblique">
                                        <img src="../assets/img/icon_斜体.png" alt="" />
                                    </el-checkbox-button>
                                </div>
                                <el-input class="titleStyleInput" type="number" v-model="curComponent.option.title[1].textStyle.fontSize" />
                            </div>
                        </div>
                        <div v-if="curComponent.option.title[1].text" class="optionTitle">
                            <div>位置</div>
                            <div style="margin-left: 1.5rem;">
                                <el-radio-group size="mini" v-model="curComponent.option.title[1].left" @change="Company">
                                    <el-radio-button label="left">左上</el-radio-button>
                                    <el-radio-button label="center">中上</el-radio-button>
                                    <el-radio-button label="right">右上</el-radio-button>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                </el-collapse-item>

                <el-collapse-item title="标注" name="5" v-if="curComponent.option && curComponent.option.series[0].markPoint">
                    <div style="margin: 10px 0;">
                        <el-checkbox v-model="curComponent.option.series[0].markPoint.data[0].label.show" true-label="true" false-label="false" @change="markPointMaxChange">最大值</el-checkbox>
                        <el-checkbox v-model="curComponent.option.series[0].markPoint.data[1].label.show" true-label="true" false-label="false" @change="markPointMinChange">最小值</el-checkbox>
                    </div>
                    <div v-if="
            curComponent.option.series[0].markPoint.data[0].label.show ||
              curComponent.option.series[0].markPoint.data[1].label.show
          ">
                        <el-color-picker size="mini" :predefine="predefineColors" show-alpha v-model="
              curComponent.option.series[0].markPoint.data[0].label.color
            " @active-change="markPointColorChange"></el-color-picker>
                        <div style="border:1px solid #39435D;display: inline-block;border-radius: 4px;margin-left:5px;">
                            <el-checkbox-button v-model="
                curComponent.option.series[0].markPoint.data[0].label.fontWeight
              " true-label="bolder" false-label="normal" @change="markPointFontWeightChange">
                                <img src="../assets/img/icon_加粗.png" alt="" />
                            </el-checkbox-button>
                            <el-checkbox-button v-model="
                curComponent.option.series[0].markPoint.data[0].label.fontStyle
              " true-label="oblique" false-label="normal" @change="markPointFontStyleChange">
                                <img src="../assets/img/icon_斜体.png" alt="" />
                            </el-checkbox-button>
                        </div>
                        <el-input class="titleStyleInput" type="number" v-model="
              curComponent.option.series[0].markPoint.data[0].label.fontSize
            " @input="markPointFontSizeChange" />
                    </div>
                </el-collapse-item>

                <el-collapse-item title="轴、网格线" name="4" v-if="curComponent.option && curComponent.option.yAxis">
                    <div>
                        <div style="color:#ffffff7d;margin:10px 0;">x轴</div>
                        <div>
                            <div style="margin: 10px 1px;">
                                <el-checkbox v-model="curComponent.option.xAxis.axisLabel.show" true-label="true" false-label="false" @change="XaxisLabel">轴标签</el-checkbox>
                                <el-checkbox v-model="curComponent.option.xAxis.axisLine.show" true-label="true" false-label="false" @change="XaxisLine">轴线</el-checkbox>
                            </div>
                            <div>
                                <el-color-picker size="mini" @active-change="stylexAxiscolor" :predefine="predefineColors" show-alpha v-model="curComponent.option.xAxis.axisLabel.color"></el-color-picker>
                                <div style="border:1px solid #39435D;display: inline-block;border-radius: 4px;margin-left:5px;">
                                    <el-checkbox-button v-model="curComponent.option.xAxis.axisLabel.fontWeight" true-label="bolder" false-label="normal" @change="axisLabelBold">
                                        <img src="../assets/img/icon_加粗.png" alt="" />
                                    </el-checkbox-button>
                                    <el-checkbox-button v-model="curComponent.option.xAxis.axisLabel.fontStyle" true-label="oblique" false-label="normal" @change="axisLabelOblique">
                                        <img src="../assets/img/icon_斜体.png" alt="" />
                                    </el-checkbox-button>
                                </div>
                                <el-input class="titleStyleInput" type="number" v-model="curComponent.option.xAxis.axisLabel.fontSize" />
                            </div>
                        </div>
                    </div>
                    <div>
                        <div style="color:#ffffff7d;margin:10px 0;">y轴</div>
                        <div>
                            <div style="margin: 10px 1px;">
                                <el-checkbox v-model="curComponent.option.yAxis.axisLabel.show" true-label="true" false-label="false" @change="YaxisLabel">轴标签</el-checkbox>
                                <el-checkbox v-model="curComponent.option.yAxis.axisLine.show" true-label="true" false-label="false" @change="YaxisLine">轴线</el-checkbox>
                            </div>
                            <div>
                                <el-color-picker size="mini" @active-change="styleyAxiscolor" :predefine="predefineColors" show-alpha v-model="curComponent.option.yAxis.axisLabel.color"></el-color-picker>
                                <div style="border:1px solid #39435D;display: inline-block;border-radius: 4px;margin-left:5px;">
                                    <el-checkbox-button v-model="curComponent.option.yAxis.axisLabel.fontWeight" true-label="bolder" false-label="normal" @change="YaxisLabelBold">
                                        <img src="../assets/img/icon_加粗.png" alt="" />
                                    </el-checkbox-button>
                                    <el-checkbox-button v-model="curComponent.option.yAxis.axisLabel.fontStyle" true-label="oblique" false-label="normal" @change="YaxisLabelOblique">
                                        <img src="../assets/img/icon_斜体.png" alt="" />
                                    </el-checkbox-button>
                                </div>
                                <el-input class="titleStyleInput" type="number" v-model="curComponent.option.yAxis.axisLabel.fontSize" />
                            </div>
                        </div>
                    </div>
                    <div>
                        <div style="color:#ffffff7d;margin:10px 0;">网格线</div>
                        <div>
                            <el-checkbox v-model="curComponent.option.yAxis.splitLine.show" true-label="true" false-label="false" @change="XaxissplitLine">横向网格</el-checkbox>
                            <el-checkbox v-model="curComponent.option.xAxis.splitLine.show" true-label="true" false-label="false" @change="YaxissplitLine">纵向网格</el-checkbox>
                        </div>
                    </div>
                </el-collapse-item>

                <el-collapse-item title="标注" name="5" v-if="curComponent.option.series[0].markPoint">
                    <div style="margin: 10px 0;">
                        <el-checkbox v-model="curComponent.option.series[0].markPoint.data[0].label.show" true-label="true" false-label="false" @change="markPointMaxChange">最大值</el-checkbox>
                        <el-checkbox v-model="curComponent.option.series[0].markPoint.data[1].label.show" true-label="true" false-label="false" @change="markPointMinChange">最小值</el-checkbox>
                    </div>
                    <div v-if="
            curComponent.option.series[0].markPoint.data[0].label.show ||
              curComponent.option.series[0].markPoint.data[1].label.show
          ">
                        <el-color-picker size="mini" :predefine="predefineColors" show-alpha v-model="
              curComponent.option.series[0].markPoint.data[0].label.color
            " @active-change="markPointColorChange"></el-color-picker>
                        <div style="border:1px solid #39435D;display: inline-block;border-radius: 4px;margin-left:5px;">
                            <el-checkbox-button v-model="
                curComponent.option.series[0].markPoint.data[0].label.fontWeight
              " true-label="bolder" false-label="normal" @change="markPointFontWeightChange">
                                <img src="../assets/img/icon_加粗.png" alt="" />
                            </el-checkbox-button>
                            <el-checkbox-button v-model="
                curComponent.option.series[0].markPoint.data[0].label.fontStyle
              " true-label="oblique" false-label="normal" @change="markPointFontStyleChange">
                                <img src="../assets/img/icon_斜体.png" alt="" />
                            </el-checkbox-button>
                        </div>
                        <el-input class="titleStyleInput" type="number" v-model="
              curComponent.option.series[0].markPoint.data[0].label.fontSize
            " @input="markPointFontSizeChange" />
                    </div>
                </el-collapse-item>
                <!-- 适用于直角坐标系 -->
                <el-collapse-item title="图例" name="6" v-if="curComponent.option&&curComponent.option.grid&&curComponent.option.legend">
                    <el-checkbox v-model="curComponent.option.legend.show" true-label='true' false-label='false' @change="legendChange">图例显示</el-checkbox>
                    <div v-if="curComponent.option.legend.show">
                        <div>样式</div>
                        <div>
                            <el-color-picker size="mini" popper-class="颜色设置" @active-change="styleylegendcolor" :predefine="predefineColors" show-alpha v-model="curComponent.option.legend.textStyle.color"></el-color-picker>
                            <div style="border:1px solid #39435D;display: inline-block;border-radius: 4px;margin-left:5px;">
                                <el-checkbox-button v-model="curComponent.option.legend.textStyle.fontWeight" true-label="bolder" false-label="normal">
                                    <img src="../assets/img/icon_加粗.png" alt="" />
                                </el-checkbox-button>
                                <el-checkbox-button v-model="curComponent.option.legend.textStyle.fontStyle" true-label="oblique" false-label="normal">
                                    <img src="../assets/img/icon_斜体.png" alt="" />
                                </el-checkbox-button>
                            </div>
                            <el-input class="titleStyleInput" type="number" v-model="curComponent.option.legend.textStyle.fontSize" />
                        </div>
                        <div class="optionTitle">
                            <div>位置</div>
                            <div style="margin-left: 1.5rem;">
                                <el-radio-group size="mini" v-model="curComponent.option.legend.left" @change="CompanyColor">
                                    <el-radio-button label="left">左上</el-radio-button>
                                    <el-radio-button label="center">中上</el-radio-button>
                                    <el-radio-button label="right">右上</el-radio-button>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                </el-collapse-item>
                <!-- 适用于极坐标系 -->
                <el-collapse-item title="图例" name="7" v-if="curComponent.option&&curComponent.option.polar">
                    <el-checkbox v-model="curComponent.option.legend.show" true-label='true' false-label='false' @change="polarlegendChange">图例显示</el-checkbox>
                    <div v-if="curComponent.option.legend.show">
                        <div>样式</div>
                        <div>
                            <el-color-picker size="mini" popper-class="颜色设置" @active-change="styleylegendcolor" :predefine="predefineColors" show-alpha v-model="curComponent.option.legend.textStyle.color"></el-color-picker>
                            <div style="border:1px solid #39435D;display: inline-block;border-radius: 4px;margin-left:5px;">
                                <el-checkbox-button v-model="curComponent.option.legend.textStyle.fontWeight" true-label="bolder" false-label="normal">
                                    <img src="../assets/img/icon_加粗.png" alt="" />
                                </el-checkbox-button>
                                <el-checkbox-button v-model="curComponent.option.legend.textStyle.fontStyle" true-label="oblique" false-label="normal">
                                    <img src="../assets/img/icon_斜体.png" alt="" />
                                </el-checkbox-button>
                            </div>
                            <el-input class="titleStyleInput" type="number" v-model="curComponent.option.legend.textStyle.fontSize" />
                        </div>
                        <div class="optionTitle">
                            <div>位置</div>
                            <div style="margin-left: 1.5rem;">
                                <el-radio-group size="mini" v-model="curComponent.option.legend.id" @change="polarCompanyColor">
                                    <el-radio-button label="left-top">左上</el-radio-button>
                                    <el-radio-button label="left-center">左中</el-radio-button>
                                    <el-radio-button label="left-bottom">左下</el-radio-button>
                                </el-radio-group>
                                <el-radio-group size="mini" v-model="curComponent.option.legend.id" @change="polarCompanyColor">
                                    <el-radio-button label="right-top">右上</el-radio-button>
                                    <el-radio-button label="right-center">右中</el-radio-button>
                                    <el-radio-button label="right-bottom">右下</el-radio-button>
                                </el-radio-group>
                            </div>
                        </div>
                    </div>
                </el-collapse-item>
            </div>
        </el-collapse>
    </div>
</template>

<script>
import colors from '@/store/colors'
import * as echarts from 'echarts'
export default {
    data() {
        return {
            currentIndex: 0,
            TitleProperties: [],
            activeNames: ['1'],
            activeLegend: [],
            predefineColors: ['#4F98CB', '#3F4C6A', '#84D0BE', '#2F94D9', '#9A7DD4', '#9D8DA0', '#B976C4', '#9DD2F7', '#D1708E', '#B9CEFF', '#285ED9', '#B4C4EA', '#6E9C7A', '#5F9CEA', '#496AB8', '#6B6B6B', '#78A4B2', '#DB93C1', '#97A0EF', '#81BCF2'],
            //, 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)', '#c7158577'
        }
    },
    computed: {
        styleKeys() {
            return this.$store.state.curComponent ? Object.keys(this.$store.state.curComponent.style) : []
        },
        curComponent() {
            console.log(this.$store.state.curComponent, 'this.$store.state.curComponent')
            return this.$store.state.curComponent
        },
        colors() {
            return colors
        },
    },
    mounted() {
        console.log(this.styleKeys)
    },
    methods: {
        setEchartsColor(color) {
            if (this.curComponent.option.color) {
                this.curComponent.option.color = color
            }
            //仪表盘，定制化方案判断
            if (this.curComponent.option.series[0].axisLine) {
                if (this.curComponent.option.series[0].axisLine.lineStyle) {
                    if (this.curComponent.option.series[0].axisLine.lineStyle.color) {
                        this.curComponent.option.series[0].axisLine.lineStyle.color.forEach((item, i) => {
                            item[1] = color[i]
                        })
                    }
                }
            }

            if (this.curComponent.component == 'StackingArea3') {
                console.log(this.curComponent.option.series, '655')
                this.curComponent.option.series.forEach((item, index) => {
                    item.areaStyle.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: this.curComponent.option.color[index],
                        },
                        {
                            offset: 1,
                            color: '#00000000',
                        },
                    ])
                })
            }
            //柱状图,定制化方案判断
            if (this.curComponent.option.series.length == 1 && this.curComponent.option.series[0].type == 'bar') {
                this.curComponent.option.series.forEach(item => {
                    let data = Math.max(...item.data)
                    item.itemStyle.color = function (p) {
                        if (p.value !== data) {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: color[0] },
                                { offset: 1, color: color[1] },
                            ])
                        } else {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: color[4] },
                                { offset: 1, color: color[3] },
                            ])
                        }
                    }
                })
            }
        },
        inputChange(e) {
            let top0 = this.curComponent.option.title[0].text !== '' ? 20 : 0
            let top1 = this.curComponent.option.title[1].text !== '' ? 17 : 0
            let top2 = 0
            if (this.curComponent.option.legend) {
                top2 = this.curComponent.option.legend.show ? 12 : 0
                this.curComponent.option.legend.top = top0 + top1
            }
            this.curComponent.option.title[1].top = top0
            this.curComponent.option.grid.top = top0 + top1 + top2 + 20
        },
        legendChange(e) {
            this.curComponent.option.legend.show = JSON.parse(e)
            this.inputChange()
        },
        polarlegendChange(e) {
            this.curComponent.option.legend.show = JSON.parse(e)
            if (!this.curComponent.option.legend.id) {
                // this.curComponent.option.legend.id = 'left-top'
            }
            this.polarCompanyColor('left-top')
        },
        markPointFontSizeChange(e) {
            this.curComponent.option.series.forEach(item => {
                item.markPoint.data.forEach(i => {
                    i.label.fontSize = e
                })
            })
        },
        markPointFontStyleChange(e) {
            this.curComponent.option.series.forEach(item => {
                item.markPoint.data.forEach(i => {
                    i.label.fontStyle = e
                })
            })
        },
        markPointFontWeightChange(e) {
            this.curComponent.option.series.forEach(item => {
                item.markPoint.data.forEach(i => {
                    i.label.fontWeight = e
                })
            })
        },
        markPointColorChange(e) {
            this.curComponent.option.series.forEach(item => {
                item.markPoint.data.forEach(i => {
                    i.label.color = e
                })
            })
        },
        markPointMaxChange(e) {
            this.curComponent.option.series.forEach(item => {
                item.markPoint.data.forEach(i => {
                    if (i.type == 'max') {
                        i.label.show = JSON.parse(e)
                    }
                })
            })
        },
        markPointMinChange(e) {
            this.curComponent.option.series.forEach(item => {
                item.markPoint.data.forEach(i => {
                    if (i.type == 'min') {
                        i.label.show = JSON.parse(e)
                    }
                })
            })
        },
        XaxissplitLine(e) {
            this.curComponent.option.yAxis.splitLine.show = JSON.parse(e)
        },
        YaxissplitLine(e) {
            this.curComponent.option.xAxis.splitLine.show = JSON.parse(e)
        },
        YaxisLabelBold(e) {
            this.curComponent.option.yAxis.axisLabel.fontWeight = e
        },
        YaxisLabelOblique(e) {
            this.curComponent.option.yAxis.axisLabel.fontStyle = e
        },
        axisLabelBold(e) {
            this.curComponent.option.xAxis.axisLabel.fontWeight = e
        },
        axisLabelOblique(e) {
            this.curComponent.option.xAxis.axisLabel.fontStyle = e
        },
        YaxisLine(e) {
            this.curComponent.option.yAxis.axisLine.show = JSON.parse(e)
        },
        YaxisLabel(e) {
            this.curComponent.option.yAxis.axisLabel.show = JSON.parse(e)
        },
        XaxisLine(e) {
            this.curComponent.option.xAxis.axisLine.show = JSON.parse(e)
        },
        XaxisLabel(e) {
            this.curComponent.option.xAxis.axisLabel.show = JSON.parse(e)
        },
        CompanyColor(e) {
            this.curComponent.option.legend.left = e
        },
        polarCompanyColor(e) {
            if (e.split('-')[0] === 'left') {
                this.curComponent.option.polar.center = ['60%', '50%']
                this.curComponent.option.legend.left = 20
            } else {
                this.curComponent.option.polar.center = ['40%', '50%']
                delete this.curComponent.option.legend.left
                this.curComponent.option.legend.right = 20
            }
            this.curComponent.option.legend.top = e.split('-')[1]
        },
        Company(e) {
            this.curComponent.option.title[1].left = e
        },
        CompanyBold(e) {
            this.curComponent.option.title[1].textStyle.fontWeight = e
        },
        CompanyOblique(e) {
            this.curComponent.option.title[1].textStyle.fontStyle = e
        },
        titlePosition(e) {
            this.curComponent.option.title[0].left = e
        },
        titleBold(e) {
            this.curComponent.option.title[0].textStyle.fontWeight = e
        },
        titleOblique(e) {
            this.curComponent.option.title[0].textStyle.fontStyle = e
        },
        handleChange(val) {
            console.log(val, 'val-----------')
        },
        TitleUnit(val) {},
        styleborderColor(e) {
            this.curComponent.style.borderColor = e
        },
        stylecolor(e) {
            this.curComponent.style.color = e
        },
        stylebackgroundColor(e) {
            this.curComponent.style.backgroundColor = e
        },
        styletitlecolor(e) {
            this.curComponent.option.title[0].textStyle.color = e
        },
        styletitlecolor(e) {
            this.curComponent.option.title[0].textStyle.color = e
        },
        styletitlecolorSub(e) {
            this.curComponent.option.title[1].textStyle.color = e
        },
        stylexAxiscolor(e) {
            this.curComponent.option.xAxis.axisLabel.color = e
        },
        styleyAxiscolor(e) {
            this.curComponent.option.yAxis.axisLabel.color = e
        },
        styleylegendcolor(e) {
            this.curComponent.option.legend.textStyle.color = e
        },
        borderStyleChange(e) {
            this.curComponent.style.borderStyle = e
        },
        fontWeightChange(e) {
            this.curComponent.style.fontWeight = e
        },
        textAlignChange(e) {
            this.curComponent.style.textAlign = e
        },
        verticalAlignChange(e) {
            this.curComponent.style.verticalAlign = e
        },
    },
}
</script>

<style lang="scss" scoped>
.attr-list {
    overflow: auto;
    padding: 20px;
    padding-top: 0;
    height: 100%;
}
.none {
    display: none;
}
.titleStyleInput {
    width: 4rem;
    margin-left: 5px;
}
.legendBox {
    display: flex;
    justify-content: space-around;
    padding: 0.2rem;
    border: 1px solid #3a445a;
    cursor: pointer;
}
.legend {
    width: 30px;
    height: 15px;
    margin: 0 0.1rem;
}
.legendItem {
    margin: 0.35rem 0;
}
.legendItem:hover {
    border: 1px solid #66b1ff;
}
.locationDimension {
    width: 30%;
    position: relative;
    .locationText {
        position: absolute;
        color: #ffffff4d;
        left: 75%;
    }
}
.attItem {
    color: #ffffff99;
    padding: 10px 0;
}
.inputRight {
    width: 30%;
}
.itemColor {
    color: #ffffff4d;
}
.optionTitle {
    display: flex;
    color: #ffffff7d;
    margin: 10px 0;
}
.el-checkbox {
    color: #ffffff7d;
}
</style>
